<template>
	<div>
		<view class="user_info_wrap">
			<!-- 登录前显示 -->
			<view class="login" v-if="!userInfo.nickName"><navigator url="/pages/login/index">登录</navigator></view>
			<!-- 登录后显示 -->
			<view class="user_img_wrap" v-else>
				<image class="img_bg" :src="userInfo.avatarUrl"></image>
				<view class="user_info">
					<image class="user_icon" :src="userInfo.avatarUrl" mode="widthFix"></image>
					<view class="user_name">{{ userInfo.nickName }}</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="user_content">
			<view class="user_main">
				<!-- 1tabs -->
				<view class="his_wrap">
					<navigator class="user_goods" url="/pages/collect/main">
						<view class="his_num">{{ collectNum }}</view>
						<view class="his_name">商品关注</view>
					</navigator>
					<navigator class="user_follow">
						<view class="his_num">0</view>
						<view class="his_name">店铺关注</view>
					</navigator>
					<navigator class="user_like">
						<view class="his_num">0</view>
						<view class="his_name">喜欢</view>
					</navigator>
					<navigator class="user_history">
						<view class="his_num">0</view>
						<view class="his_name">足迹</view>
					</navigator>
				</view>
				<!-- 2我的订单 -->
				<view class="user_order">
					<view class="order_title">我的订单</view>
					<view class="order_tabs_wrap">
						<navigator url="/pages/order/main?type=1">
							<view class="iconfont icon-ding_dan"></view>
							<view class="text">全部订单</view>
						</navigator>
						<navigator url="/pages/order/main?type=2">
							<view class="iconfont icon-fukuantongzhi"></view>
							<view class="text">待付款</view>
						</navigator>
						<navigator url="/pages/order/main?type=3">
							<view class="iconfont icon-receipt-address"></view>
							<view class="text">待收货</view>
						</navigator>
						<navigator url="/pages/order/main?type=4">
							<view class="iconfont icon-receipt-address"></view>
							<view class="text">退货/退款</view>
						</navigator>
					</view>
				</view>
				<!-- 3收货地址管理 -->
				<view class="address">收货地址管理</view>
				<!-- 4反馈 -->
				<view class="feedback_wrap">
					<!-- 联系客服 -->
					<view class="feedback_item">
						<text>联系客服</text>
						<text>400-618-4000</text>
					</view>
					<!-- 意见反馈 -->
					<navigator class="feedback_item" url="/pages/feedback/index">意见反馈</navigator>
					<!-- 关于我们 -->
					<view class="feedback_item">关于我们</view>
				</view>
				<!-- 5推荐 -->
				<view class="recommend">推荐给其他人</view>
			</view>
		</view>
	</div>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			collectNum: 0
		};
	},
	methods: {
		onShow: function() {
			this.userInfo = uni.getStorageSync('userInfo');
			const collectList = uni.getStorageSync('collectList');
			this.collectNum = collectList.length;
		}
	}
};
</script>

<style lang="less" scope>
page {
	background-color: #eee;
	height: 100%;
}

// 包裹器
.user_info_wrap {
	position: relative;
	height: 45vh;
	background-color: var(--themeColor);
	overflow: hidden;

	.login {
		position: absolute;
		// 定位
		left: 50%;
		top: 40%;
		transform: translate(-50%);
		border: 1rpx solid greenyellow;
		font-size: 38rpx;
		padding: 30rpx;
		color: #fff;
		border-radius: 10rpx;
	}

	.user_img_wrap {
		position: relative;

		// 背景
		.img_bg {
			width: 100%;
			height: 50vh;
			filter: blur(10rpx);
		}

		// 信息
		.user_info {
			position: absolute;
			left: 50%;
			transform: translate(-50%);
			top: 20%;
			text-align: center;

			// 头像
			.user_icon {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}

			.user_name {
				color: #fff;
				margin-top: 40rpx;
			}
		}
	}
}

.user_content {
	position: relative;
	color: #666;

	.user_main {
		width: 90%;
		position: absolute;
		left: 50%;
		top: -40rpx;
		padding-bottom: 100rpx;
		transform: translate(-50%);

		.his_wrap {
			display: flex;
			background-color: #fff;
			text-align: center;
			padding: 10rpx 0;

			navigator {
				flex: 1;

				.his_num {
					color: var(--themeColor);
				}
			}
		}
	}

	.user_order {
		margin-top: 30rpx;

		.order_title {
			background-color: #fff;
			border-bottom: 1rpx solid #ccc;
			padding: 20rpx;
		}

		.order_tabs_wrap {
			display: flex;
			background-color: #fff;
			text-align: center;
			padding: 10rpx 0;

			navigator {
				flex: 1;

				.iconfont {
					color: var(--themeColor);
				}
			}
		}
	}

	// 收货地址
	.address {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 20rpx;
	}

	// 反馈
	.feedback_wrap {
		background-color: #fff;
		margin-top: 30rpx;
		// padding: 20rpx;
		width: 100%;

		// 子项
		.feedback_item {
			padding: 20rpx;
			border-bottom: 1rpx solid #ccc;
		}
	}

	.recommend {
		background-color: #fff;
		padding: 20rpx;
		margin-top: 30rpx;
	}
}
</style>
